<template>
	<view class="topic_parent_box" @click="toInfo">
		
		<view class="topic_box">
			<image class="topic_image" :src="data.cover" mode="aspectFill"></image>
			<view class="topic_info_box">
				<text class="topic_title"> {{data.name}} </text>
				<view class="topic_count" >
					{{data.todayNum}} {{data.memberNickname}} 
				</view>
			</view>
			
			
			<view class="join_btn">
				<u-button plain shape='circle' size="mini" type="primary" text="加入" color="#06a8ff"></u-button>
			</view>
		</view>
		
		<!-- 最新的帖子及帖子总数 -->
		<view class="topic_article_box">
			<text class="topic_article">{{data.description}}</text>
			<view class="article_count">
				<image class="article_count_icon" src="/static/article_msg.png"></image>
				<text class="article_count_txt">99999</text>
			</view>
		</view>
		
	</view>
</template>

<script>
	export default {
		name: "topicItem",
		props: {
			// 数据
			data: {
				type: Object,
				default () {
					return {}
				}
			},
		},
		data() {
			return {}
		},
		

	
		methods: {
			// 详情
			toInfo(){
				uni.navigateTo({
					url: '/pages/category/topic'
				})
				
			},
			


			
		}
	}
</script>

<style lang="scss" scoped>
	// 话题显示样式
	.topic_parent_box {
		display: flex;
		flex-flow: column;
		margin-left: 2px;
		padding: 4px 10px 4px 6px;
		background-color: #FFFFFF;
		margin-bottom: 2px;
	}

	.topic_box {
		display: flex;
		flex-direction: row;
		flex-wrap: nowrap;
	}

	// 话题图片
	.topic_image {
		width: 54px;
		height: 54px;
		border-radius: 10px;
		margin-top: 4px;
		margin-right: 10px;
	}

	// 话题信息
	.topic_info_box {
		display: flex;
		flex-flow: column;
		flex: 1;
	}

	// 话题名称
	.topic_title {
		flex: 1;
		font-size: 16px;
		line-height: 18px;
		color: #333333;
		margin-top: 12px;
		overflow: hidden;
		word-break: break-all;
		/* break-all(允许在单词内换行。) */
		text-overflow: ellipsis;
		/* 超出部分省略号 */
		display: -webkit-box;
		/** 对象作为伸缩盒子模型显示 **/
		-webkit-box-orient: vertical;
		/** 设置或检索伸缩盒对象的子元素的排列方式 **/
		-webkit-line-clamp: 1;
		/** 显示的行数 **/
	}

	.topic_count {
		color: #8a8a8a;
		font-size: 13px;
		margin-bottom: 5px;
	}
	
	.join_btn{
		width: 50px;
		margin-top: 19px;
	}
	
	
	.topic_article_box {
		display: flex;
		flex-direction: row;
		flex-wrap: nowrap;
		margin-top: 10px;
		border-radius: 5px;
		background-color: #f1f1f1;
		padding: 2px 10px;
	}	
	.topic_article {
		flex: 1;
		font-size: 13px;
		margin: 5px 0;
		color: #999999;
		line-height: 20px;
		height: 20px;
		overflow: hidden;
		word-break: break-all;
		/* break-all(允许在单词内换行。) */
		text-overflow: ellipsis;
		/* 超出部分省略号 */
		display: -webkit-box;
		/** 对象作为伸缩盒子模型显示 **/
		-webkit-box-orient: vertical;
		/** 设置或检索伸缩盒对象的子元素的排列方式 **/
		-webkit-line-clamp: 1;
		/** 显示的行数 **/
	}
	.article_count{
		display: flex;
		flex-direction: row;
		align-items: center;
		width: 43px;
	}
	.article_count_icon {
		width: 12px;
		height: 12px;
		margin-top: 2px;
		margin-right: 3px;
		position: relative;
	}
	.article_count_txt{
		width: 30px;
		text-align: center;
		line-height: 18px;
		font-size: 11px;
		color: #43484D;
	}
	

	.myBtn {
		height: 22px;
		font-size: 10px;
		min-width: 50px;
		padding: 0px 8px;
		border-color: #3c9cff;
		color: #3c9cff;

		border-width: 1px;
		border-style: solid;
	}


	.loadmore-box {
		display: flex;
		flex-direction: row;
		flex-wrap: nowrap;
		align-items: center;
		justify-content: center;
		background-color: #FEFEFE;
	}

	.refresh-img {
		height: 90px;
		width: 120px;
	}
</style>
